<template>
  <div>
    <el-card class="box-card">
      <el-button type="primary" icon="Plus" @click="addItem">新增用户</el-button>
      <vue-table style="margin-top: 20px;" :border="false" :tableHeade="tableHeade" :tableData="tableData" :operationList="operationList" @operation="operation" @confirmDelete="confirmDelete" :width="operationList.length * 50">
        <template v-slot:default="{ row, head }">
          <div v-if="head === 'logoUrl'">
            <!-- <el-image style="width: 100px; height: 100px" :src="row.logoUrl" fit="fill" /> -->
          </div>
        </template>
      </vue-table>
      <vue-page :pageInfo="pageInfo" @currentChange="currentChange" />
    </el-card>
    <el-dialog :title="title" v-model="dialogVisible" width="50%" @close="handleClose">
      <el-form ref="formData" :disabled="disabled" :model="form" :inline="true" label-suffix=":" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="权限">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select style="width: 192px;" v-model="form.name" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="公司">
            <el-select style="width: 192px;" v-model="form.name" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.IsEnabled" active-text="启用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import type { operationListType, tableDataType } from '@/components/Table/type'
import { reqHasTrademark } from '@/api/product/trademark/index'
let tableHeade = reactive([
  { prop: 'tmName', label: '用户ID' },
  { prop: 'userNumber', label: '姓名' },
  { prop: 'userNumber', label: '权限' },
  // { prop: 'logoUrl', label: '权限', custom: true},
  { prop: 'userNumber', label: '部门' },
  { prop: 'userNumber', label: '密码' },
  { prop: 'userNumber', label: '电话' },
  { prop: 'userNumber', label: '手机号' },
  { prop: 'userNumber', label: '邮箱' },
  { prop: 'userNumber', label: '公司' },
  { prop: 'userNumber', label: '状态' },
  { prop: 'userNumber', label: '创建时间' },
])
let operationList = reactive([
  { name: '查看', index: 1, isShow: true},
  { name: '编辑', index: 2, isShow: true},
  { name: '删除', index: 3, color: 'red', isShow: true},
])
let pageInfo = reactive({
  total: 0,
  page: 1,
  limit: 10
})
let tableData = ref<any>([])
// let form = reactive({
//   name: '',
//   IsEnabled: true,
// });
let form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  IsEnabled: true,
  type: [],
  resource: '',
  desc: '',
})
let options = [
  { value: '部门一', label: '部门一' },
  { value: '部门二', label: '部门二' },
  { value: '部门三', label: '部门三' },
];
let title = ref('新增用户');
let dialogVisible = ref(false);
let disabled = ref(false);
// 新增
const addItem = () => {
  title.value = '新增用户';
  disabled.value = false
  dialogVisible.value = true;
}
// 查看
const viewItem = (item: tableDataType) => {
  title.value = '查看用户';
  disabled.value = true
  dialogVisible.value = true;
}
// 编辑
const EditItem = (item: tableDataType) => {
  title.value = '编辑用户';
  disabled.value = false
  dialogVisible.value = true;
}
const handleClose = () => {
  show.value = false;
};
onMounted(() => {
  getHasTrademark()
})
const getHasTrademark = async () => {
//   let res = await reqHasTrademark(pageInfo.page, pageInfo.limit)
//   console.log(res)
  tableData.value = [{tmName: 'tmName1'}, {tmName: 'tmName2'}, {tmName: 'tmName3'}, {tmName: 'tmName4'}, {tmName: 'tmName5'}, {}, {}, {}, {}, {}]
  pageInfo.total = 10
}
const operation = (item: operationListType, obj: tableDataType) => {
  console.log(item, obj)
  if (item.name === '查看') {
    viewItem(obj);
  } else if (item.name === '编辑') {
    EditItem(obj);
  }
}
const currentChange = (e: number) => {
  console.log(e)
}
const confirmDelete = (e: tableDataType) => {
  console.log(e)
}

let show = ref(false)
const toggleFade = () => {
  let element = document.getElementById('myElement');
  element!.classList.toggle('active');
}
</script>
<style scoped lang="scss">
</style>
